<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="copyright" content=""/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>找回密码</title>
    <link href="<%=basePath%>hplus/css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
    <link href="<%=basePath%>hplus/css/font-awesome.min93e3.css?v=4.3.0" rel="stylesheet">
    <link href="<%=basePath%>hplus/css/animate.min.css" rel="stylesheet">
    <link href="<%=basePath%>hplus/css/style.min.css?v=3.0.0" rel="stylesheet">
    <link href="<%=basePath%>hplus/css/login.min.css?v=3.0.0" rel="stylesheet">

    <link href="../favicon.ico" rel="shortcut icon">
	<style type="text/css">
		.s_btn{
            float: right;
            margin: 23px 10% 0 0;
            width: 120px;
        }
        .buzhou{width: 100%;text-align: center;font-size: 16px;margin: 30px 0;}
        .buzhou td{border-bottom: 4px solid #ddd;padding: 10px 0;}
        .buzhou td>span{display: inline-block;background: #bbb;width: 24px;height: 24px;border-radius: 12px;margin-right: 8px;color: white;}
        .buzhou td.current{color: #18a689;border-bottom-color: #18a689;}
        .buzhou td.current>span{background: #18a689;}
	</style>
</head>
<body class="gray-bg">
	<div class="ibox-content" style="height:80px;line-height:80px;padding:0;"> 
        <img src="<%=basePath%>hplus/img/logo.jpg" style="margin-left:10%"/>
        <button type="button" class="btn btn-outline btn-primary s_btn" id="gotologin">登录</button>
    </div>
<div class="wrapper wrapper-content animated fadeInRight">
	<div class="row">
		<div class="col-sm-4 col-sm-offset-4">
			<table class="buzhou">
				<tr>
					<td class="current"><span>1</span>身份验证</td>
					<td><span>2</span>重置密码</td>
				</tr>
			</table>
		</div>
	</div>
    <div class="col-sm-4" style="float: none;margin: 0 auto">
        <div class="ibox-title">
        	<form novalidate="novalidate" class="form-horizontal" id="forgetForm">
                <div class="form-group">
                    <label class="col-sm-3 control-label">手机号码：</label>

                    <div class="col-sm-8">
                        <input id="account" placeholder="请输入手机号" maxlength="11" name="mobile" class="form-control"
                               type="text">

                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label">验证码：</label>

                    <div class="col-sm-8">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="请输入验证码" id="change_code">
                            <span class="input-group-btn"> <button type="button" class="btn btn-primary J_xcode"
                                                                   id="code_button">获取验证码
                                        </button> </span>
                        </div>
                        <em id="a" class="s_red_three text-danger"></em>
                        <span class="help-block m-b-none "></span>
                    </div>
                </div>
		
                <div class="form-group">
                    <div class="col-sm-8 col-sm-offset-3" style="float: none;margin: 0 auto;text-align: center">
                        <button class="btn btn-primary" type="button" id="next">下一步</button>
                    </div>
                </div>
            </form>
        </div>
<!--         <div class="ibox-content"> -->
<%--             <form novalidate="novalidate" class="form-horizontal" id="forgetForm"> --%>
<!--                 <div class="form-group"> -->
<!--                     <label class="col-sm-3 control-label">手机号码：</label> -->

<!--                     <div class="col-sm-8"> -->
<!--                         <input id="account" placeholder="请输入手机号" maxlength="11" name="mobile" class="form-control" -->
<!--                                type="text"> -->

<!--                     </div> -->
<!--                 </div> -->

<!--                 <div class="form-group"> -->
<!--                     <label class="col-sm-3 control-label">验证码：</label> -->

<!--                     <div class="col-sm-8"> -->
<!--                         <div class="input-group"> -->
<!--                             <input type="text" class="form-control" placeholder="请输入验证码" id="change_code"> -->
<!--                             <span class="input-group-btn"> <button type="button" class="btn btn-primary J_xcode" -->
<!--                                                                    id="code_button">获取验证码 -->
<!--                                         </button> </span> -->
<!--                         </div> -->
<!--                         <em id="a" class="s_red_three text-danger"></em> -->
<!--                         <span class="help-block m-b-none "></span> -->
<!--                     </div> -->
<!--                 </div> -->
		
<!--                 <div class="form-group"> -->
<!--                     <div class="col-sm-8 col-sm-offset-3" style="float: none;margin: 0 auto;text-align: center"> -->
<!--                         <button class="btn btn-primary" type="button" id="next">下一步</button> -->
<!--                     </div> -->
<!--                 </div> -->
<%--             </form> --%>
<!--         </div> -->
    </div>
</div>
<form action="<%=basePath%>/view/ui/resetPwd" method="post" id="form">
    <input hidden="hidden" name="cz" value="t"/>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
    function daojishi() {
        var check_phone = checkPhone();
        if (!check_phone) {
            return;
        }
        var $this = $('.J_xcode'),
            _this = this,
            i = 60;
        _this.disabled = 'disabled';
        clearInterval(repeat);
        var repeat = setInterval(function () {
            i--;
            if (i == 0) {
                $('#code_button').removeAttr('disabled');
                $this.removeClass('gray').html('获取验证码');
                clearInterval(repeat);
            } else {
                _this.disabled = false;
                $('#code_button').attr('disabled', 'false');
                $this.addClass('gray').html(i + 's后重新获取');
            }
        }, 1000);
    };

    $('.s_psw_list li .s_input_box input').focus(function () {
        $(this).addClass('focus');
    });
    $('.s_psw_list li .s_input_box input').blur(function () {
        $(this).removeClass('focus');
    });
    
    $('#gotologin').click(function(){
    	window.location.href = "<%=basePath%>";
    });
</script>

<script type="text/javascript">
    var rCodeFalg = false;
    $(function () {
        //发送短信
        $('#code_button').click(function () {
            wait(this);
            $('#a').text('');
            var check_phone = checkPhone();
            if (check_phone) {
                var account = $('#account').val();
                var code_type = "change_code";
                var type = "recover";
                var url = "<%=basePath%>/smsSend/ajaxSendCode";
                $.post(url, {"account": account, "codeType": code_type,"type":type}, function (data) {
                    if (data.status == "200") {
                        rCodeFalg = true;
                        daojishi();
                    } else if (data.status == "501") {
                        $('#a').text(data.message);
                    }
                }, "json");
            }
        });

        //下一页
        $('#next').click(function () {
            $('#a').text('');
            var result = checkAll();
            if (!result) {
                return;
            }
            var account = $('#account').val();
            var code_type = "change_code";
            var ver_code = $('#change_code').val();
            var params = {
                "account": account,
                "codeType": "change_code",
                "verCode": ver_code
            }
            /* 先进行验证码校验 ，校验成功进行下一步 */
            var url = "<%=basePath%>/smsSend/ajaxSmsVerify";
            $.post(url, params, function (data) {
                if ("200" == data.status) {
                    /* 校验成功，改变url，执行下一步 */
                    url = "<%=basePath%>/account/ajaxUserInfoByRecoverPwd";
                    $.post(url, params, function (data) {
                        /* 执行下一步成功，跳转新密码页面 */
                        if ("200" == data.status) {
                            var msg = data.message;
                            $('#form').submit();
                        } else {
                            var error_msg = data.message;
                            $('#a').text(error_msg);
                        }
                    }, "json");
                } else {
                    var error_msg = data.message;
                    $('#a').text(error_msg);
                }
            }, "json");
        });


    });
</script>
<script type="text/javascript">
    function checkPhone() {
        var reg = /^1(3|4|5|7|8)\d{9}$/;//正则表达式
        //var tel=document.getElementById("zc_mobile");
        var tel = $('#account').val();
        if (tel == null || tel == '') {
            $('#a').text('手机号不能为空');
            return false;
        }

        //匹配
        var result = reg.test(tel);
        if (!result) {
            //手机号格式不正确，执行下面
            $('#a').text('请输入正确的11位手机号');
            document.getElementById("account").Value = "";
            return false;
        } else {
            //手机号格式正确
            return true;
        }
    }

    function checkAll() {
        var account = $('#account').val();
        var ver_code = $('#change_code').val();
        var resultP = checkPhone();
        if (resultP) {
            if (!rCodeFalg) {
                $('#a').text("请先点击发送验证码");
                return false;
            }
        }
        if (ver_code == null && ver_code == '') {
            $('#a').text("安全码不能为为空");
            return false;
        }
        return true;
    }

</script>
<script type="text/javascript">
    /* 清空错误提示 */
    $('#account').focus(function () {
        $('#a').text("");
    });
    $('#change_code').focus(function () {
        $('#a').text("");
    });
    function showDialog(title) {
        $('#dialog_title').html('<img src="${pageContext.request.contextPath}/images/system/s_tick.png"/>' + title + '');
        $('.s_popup_delect2,.s_consum').show().delay(2000).fadeOut();
    }
    function wait(me) {
        console.log("进入wait");
        me.disabled = true;
        window.setTimeout(function () {
            me.disabled = false;
        }, 2000);
    }
</script>
</body>
</html>

